<% layout('../layouts/layout') %>
<% include ../../layouts/layout.header.ejs %>
<link href="/css/detail_all.css" rel="stylesheet">
<div class="container">
    <div class="row">
        <div class="text-center echart-details custRegSituate-detail">
            <h1 class="echart-details-title">开发区近5年企业登记状况</h1>
            <div id="custRegSituate" class="echart-details-content"></div>
            <div class="echart-details-explain">
                <h3>数据解读：</h3>
                <p id="echart-details-explain-content"></p>
            </div>
        </div>
    </div>
</div>
<script src="/libs/jQuery/jquery.min.js"></script>
<script src="/libs/echart/echarts.min.js"></script>
<script>

$(function(){
    if($(".custRegSituate-detail").length > 0){


        $.ajax({
            url:'/devtZoneMarketSubject/kfqCommonService/api/gz/lg/custRegSituate/custRegSituate.v',
            type: "POST",
            dataType: "json",
            data: {},
            success: function(data){
                console.log(data);
                if(data.status == "200"){
                    var oData = data.data.dataList;



                    // 小数转百分比
                    function toPercent(point){
                        var str=Number(point*100).toFixed(1);
                        str+="%";
                        return str;
                    }

                    // 内容调整
                    var oAllNum = data.data.dataList[data.data.dataList.length-1].regNum - data.data.dataList[0].regNum;      // 总增长数
                    var num = 0;
                    for(var i=0;i<data.data.dataList.length;i++){
                        if(i < data.data.dataList.length-1){
                            num += data.data.dataList[(i+1)].regIncre / data.data.dataList[i].regNum;
                        }
                    }
                    var oHtml = "如图所示，2012年到2016年企业登记平均每年上涨" + toPercent(num/5)+ "，总共增加了"+oAllNum+"家企业，可见开发区发展趋势良好。";
                    $("#echart-details-explain-content").html(oHtml);


                    var xAxisData   = [];     //年数
                    var incrementData  = [];  //增量
                    var centData  = [];       //总量

                    $.each(oData,function(i,item){
                        xAxisData.push(item.regYear);
                        incrementData.push(item.regIncre);
                        centData.push(item.regNum);
                    })
                    console.log(xAxisData);
                    console.log(incrementData);
                    console.log(centData);

                    // 基于准备好的dom，初始化echarts实例
                    var myChart = echarts.init(document.getElementById('custRegSituate'));

                    var option = {
                        xAxis : [
                            {
                                type : 'category',
                                data : xAxisData
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value'
                            }
                        ],
                        tooltip : {
                            trigger: 'axis'
                        },
                        series : [
                            {
                                name:'增量',
                                type:'bar',
                                data:incrementData,
                                itemStyle: {
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            },
                            {
                                name:'总量',
                                type:'bar',
                                data:centData,
                                itemStyle: {
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]

                    };


                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);



                }else{
                    layer.msg("商事接口报错");
                }
            },
            error: function(){
                layer.msg("商事接口报错");
            }
        });

    }
})
</script>
<% include ../../layouts/layout.footer.ejs %>